<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
  .menu-item-center{
    font-size: 24px;
    font-weight: bold;
    ;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color:orange}

  .el-menu-item_top{
    position:relative;
    left: 170px;
  }
  b:hover{
    color: orange;
  }
  a{
    text-decoration: none;
    /*line-height: 30px;*/

  }
  a:link{color: black}
  a:visited{color: black}
  a:hover{color: orange}
  a:active{color: orange}
  .el-menu--horizontal>.el-menu-item {
    border-bottom: none;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: none;
  }
  .el-icon-arrow-down:before {
    content: none;
  }
  body,#app{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  #v1,#card_f{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 15px;
    text-align: center;
  }
  .item {
    padding: 18px 0;
  }
  .box-card {
    width: 320px;
    background-color: #E8E8E8;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .B{
    font-size: 36px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #f4f4f4;
    height: 200px;
  }
  .grid-content {
    min-height: 36px;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .bg-purple-dark{
    background-color: #ebebeb;
    height: 104px;
  }
  .el-carousel--horizontal{
    padding: 0px 20px!important;
  }
  #h1{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .foot{
    background-color: #1e1e1e;
    color: #a2a2a2;
    height: 193px;
    margin: 0;
    padding: 0;
    margin-left: -28px;
    margin-right: -25px;
    min-height: 36px;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
  }

</style>
</head>
<body>
<div id="app" style="width: 1200px;margin: 0 auto" >
  <div style="padding: 0">
    <el-menu style="width: 1200px;margin: 0 auto"
             mode="horizontal"
             @select="handleSelect"
             text-color="black"
             active-text-color="black">
      <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px;"></a>
      <el-menu-item index="1" class="el-menu-item_top"><b><a href="/index.html">首页</a> </b></el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="2" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>在售品种</b></template>
          <el-menu-item index="2-1"><a href="/searchcat.html">在售猫咪</a></el-menu-item>
          <el-menu-item index="2-2"><a href="/searchdog.html">在售狗狗</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="3" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>宠物词典</b></template>
          <el-menu-item index="3-1"><a href="/catDictionary.html">猫咪的饲养方式</a></el-menu-item>
          <el-menu-item index="3-2"><a href="/dogDictionary.html">狗狗的饲养方式</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="4" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>服务项目</b></template>
          <el-menu-item index="4-1"><a href="/宠物美容.html">宠物美容</a></el-menu-item>
          <el-menu-item index="4-2"><a href="/宠物酒店.html">宠物酒店</a></el-menu-item>
          <el-menu-item index="4-3"><a href="/catcafe.html">猫咖啡馆</a></el-menu-item>
          <el-menu-item index="4-4"><a href="/dogpark.html">狗狗公园</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item index="5" class="el-menu-item_top"><a href="/lianxi.html"><b>联系我们</b></a></el-menu-item>
      <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
      <div style="float: right;position: relative;top: 10px">
        <el-input type="text">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </el-menu>
  </div>

<!--  <el-header id="h1" style="margin-top: 20px">-->

<!--    <el-menu style="width: 1200px;margin: 0 auto"-->
<!--             mode="horizontal" text-color="black">-->
<!--      <el-menu-item>-->
<!--        <img src="imgs/logo.png" style="vertical-align: middle" width="200px">-->
<!--      </el-menu-item>-->

<!--      <el-menu-item>-->
<!--        <el-dropdown placement="top">-->
<!--          <span class="el-dropdown-link" style="color: black">在售种类</span>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <div style="width: 550px;height: 300px;display: flex">-->

<!--              <el-row gutter="30">-->
<!--                <el-col span="6">-->
<!--                  <div class="d_a">-->
<!--                    <ul>-->
<!--                      <h4>猫猫</h4>-->
<!--                      <li><a href="">布偶猫</a><>-->
<!--                      <li><a href="">银渐层</a><>-->
<!--                      <li><a href="">英短</a><>-->
<!--                      <li><a href="">橘猫</a><>-->

<!--                    </ul>-->
<!--                  </div>-->
<!--                </el-col>-->

<!--                <el-col span="6">-->
<!--                  <div class="d_a">-->
<!--                    <ul>-->
<!--                      <h4>狗狗</h4>-->
<!--                      <li><a href="">约克夏</a><>-->
<!--                      <li><a href="">比熊</a><>-->
<!--                      <li><a href="">西高地</a><>-->
<!--                      <li><a href="">泰迪</a><>-->

<!--                    </ul>-->
<!--                  </div>-->
<!--                </el-col>-->

<!--                <el-col span="6">-->
<!--                  <div class="d_a">-->
<!--                    <h4>热门</h4>-->
<!--                    <li><a href="">银渐层</a><>-->
<!--                    <li><a href="">比熊</a><>-->
<!--                    <li><a href="">英短</a><>-->
<!--                    <li><a href="">柯基</a><>-->

<!--                      </ul>-->
<!--                  </div>-->
<!--                </el-col>-->

<!--                <el-col span="6">-->
<!--                  <div>-->
<!--                    <img src="imgs_b1.jpg" style="width:130px;position: relative;left: 30px;top: 50px">-->
<!--                  </div>-->
<!--                </el-col>-->
<!--              </el-row>-->

<!--            </div>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--      </el-menu-item>-->

<!--      <el-menu-item>-->
<!--        <el-dropdown placement="top">-->
<!--          <span class="el-dropdown-link" style="color: black">猫粮狗粮</span>-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <div style="width: 500px;height: 200px;display: flex">-->

<!--              <el-row gutter="30">-->
<!--                <el-col span="12">-->
<!--                  <div class="d_a" style="background-color: red">-->
<!--                    <ul>-->
<!--                      <h4>猫粮</h4>-->
<!--                      <li><a href="">凯锐思</a><>-->
<!--                      <li><a href="">伟嘉</a><>-->
<!--                      <li><a href="">素力高</a><>-->
<!--                      <li><a href="">高爷家</a><>-->

<!--                    </ul>-->
<!--                  </div>-->
<!--                </el-col>-->

<!--                <el-col span="12">-->
<!--                  <div class="d_a" style="background-color: blue">-->
<!--                    <ul>-->
<!--                      <h4>狗粮</h4>-->
<!--                      <li><a href="">海洋之星</a><>-->
<!--                      <li><a href="">派得</a><>-->
<!--                      <li><a href="">纽顿</a><>-->
<!--                      <li><a href="">比乐</a><>-->

<!--                    </ul>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--              </el-row>-->

<!--            </div>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--      </el-menu-item>-->

<!--      <el-menu-item>-->
<!--        <span class="el-dropdown-link">店铺介绍</span>-->
<!--      </el-menu-item>-->

<!--      <el-menu-item>-->
<!--        <span class="el-dropdown-link">购买流程</span>-->
<!--      </el-menu-item>-->

<!--      <el-menu-item>-->
<!--        <span class="el-dropdown-link">服务保障</span>-->
<!--      </el-menu-item>-->

<!--      <el-menu-item>-->
<!--        <span class="el-dropdown-link">联系我们</span>-->
<!--      </el-menu-item>-->
<!--    </el-menu>-->

<!--  </el-header>-->






  <!--    头部视频-->
  <div id="v1" style="margin-top: 50px;">
    <img style="float: left;padding-right: 0;width: 555px;height: 450px" src="img/5.webp" alt="">
    <video src="sybj.MP4" loop autoplay controls
           style="width: 888px;height: 500px">
    </video>
    <img style="float: left;padding-right: 0;width: 555px;height: 450px" src="img/6.webp" alt="">
  </div>
  <!--  头部视频下卡片-->
  <div id="card_f" style="margin-top: 50px">
    <el-row gutter="20">
      <el-col span="4.8" v-for="item in baozhang">
        <el-card class="box-card">
          <div class="text item">
            <p><b>{{item.title}}</b></p>
            <p>{{item.info}}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>










  <el-menu style="width: 1200px;margin: 20px auto;  position:relative;left: 400px"
           @select="handleSelect1"
           mode="horizontal"
           >
    <el-menu-item class="menu-item-center" index="1">待售小型犬</el-menu-item>
    <el-menu-item class="menu-item-center" index="2">待售中型犬</el-menu-item>
    <el-menu-item class="menu-item-center" index="3">待售大型犬</el-menu-item>
  </el-menu>

  <div v-if="currentIndex==1" class="body-1"style="width: 1200px;margin: 0 auto;">
    <el-row gutter="20">
      <el-col style="margin: 10px 0" span="6" v-for="m in mDogArr" >
        <el-card >
          <img :src="m.url" width="270px" height="270px">
          <div style="width:100%;" >
          <h4 style="text-align: center">{{m.name}}</h4>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div v-if="currentIndex==2" class="body-1"style="width: 1200px;margin: 0 auto;">
    <el-row gutter="20">
      <el-col style="margin: 10px 0" span="6" v-for="m in zDogArr" >
        <el-card >
          <img :src="m.url" width="270px" height="270px">
          <div style="width:100%;" >
            <h4 style="text-align: center">{{m.name}}</h4>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div v-if="currentIndex==3" class="body-1"style="width: 1200px;margin: 0 auto;">
    <el-row gutter="20">
      <el-col style="margin: 10px 0" span="6" v-for="m in bDogArr" >
        <el-card >
          <img :src="m.url" width="270px" height="270px">
          <div style="width:100%;" >
            <h4 style="text-align: center">{{m.name}}</h4>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>




  <el-main style="padding-left:0px;padding-right:0px;">
    <div style="background-color: #f4f4f4;width: 100%;overflow:hidden ">
      <div style="height: 418px;width: 1140px;margin: 0 auto;margin-top: 150px;">
        <el-col span="12">
          <img height="388" width="507" src="img/1.png" alt="">
        </el-col>
        <el-col span="12">
          <div style="margin-top: 50px;width: 540px;height: 262px">
            <div>
              <h2 style="font-size: 30px">星级宠屋</h2>
              <p style="color: #212529;font-size: 14px;line-height: 1.8;">
                星级宠屋是CKU认证的专业宠物养殖场，有着多年的宠物狗和宠物猫养殖经验，
                在行业内有着良好的信誉。主营犬种：边牧、泰迪（红色、巧克力色、黑色、白色、灰色）、比熊、博美、柯基、柴犬、法斗、金毛、萨摩、拉布拉多、阿拉斯加等常见犬种，
                主营猫种：英短、美短、缅因、蓝白、蓝猫、加菲、大橘等常见猫种，
                适合不同需要的宠物爱好者。</p>
            </div>
          </div>
        </el-col>
      </div>

      <div style="height: 418px;width: 1140px;margin: 0 auto;margin-top: 150px;">
        <el-col span="12">
          <img height="388" width="507" src="img/2.png" alt="">
        </el-col>
        <el-col span="12">
          <div style="margin-top: 50px;width: 540px;height: 262px">
            <div>
              <h2 style="font-size: 30px">品质保障</h2>
              <p style="color: #212529;font-size: 14px;line-height: 1.8;">
                1、 宠物屋的前期建设进行合理规划，确保舒适的生活环境。 <br>
                2、 优选强壮健康的母体进行繁殖，确保幼宠拥有健康的基因。 <br>
                3、 均衡母体和幼宠营养，完善的疫苗管理体系，并记录好相应的健康档案，为幼宠构建安全的健康屏障。 <br>
                4、 御宠之家为用户承诺并提供一星期的质保，确保用户购买无后顾之忧，降低风险。 <br>
                5、 24小时专人售后服务，提供喂养、日常管理方面的专业指导。</p>
            </div>
          </div>
        </el-col>
      </div>

      <div style="height: 418px;width: 1140px;margin: 0 auto;margin-top: 150px;margin-bottom: 150px">
        <el-col span="12">
          <img height="388" width="507" src="img/3.png" alt="">
        </el-col>
        <el-col span="12">
          <div style="margin-top: 50px;width: 540px;height: 262px">
            <div>
              <h2 style="font-size: 30px">服务保障</h2>
              <p style="color: #212529;font-size: 14px;line-height: 1.8;">
                全部幼宠都是按照标准免疫程序，注射疫苗，常规驱虫，严格把控健康关，做到让客户养的每一只宠物都是健康的并且纯种的。
                客户购买流程上完全按照心宠原则经营，宠物传染病质保30天，90天超长质保。
                您的信任就是我们的动力，我们承诺：给每个客户最好的购宠体验，最好的售后服务，最好的最完备的专业服务。</p>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </el-main>





    <el-footer style="width: 1200px; margin: 0 auto" >
      <h2 class="B" style="text-align: center">我们的客户留影</h2>
      <div >
        <template>
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item  v-for="item in arr" style="width: 500px;height: 400px">
              <img :src="item" height="100%" width="100%">
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>

      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            微信二维码<br>
            <img src="http://cp.waipet.com/assets/doge/weixin.jpg" height="105px" width="105px">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            微信/电话<br>
            13167226017
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            自营犬舍 把控源头<br>
            多重检测 品质为先<br>
            闪电发货 全国发货<br>
            专业客服 无忧售后
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            欢迎咨询<br>
            <img src="https://img2.baidu.com/it/u=2143530877,2573207865&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334" height="140px" width="220px">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div class="foot">
            星级宠屋服务有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备案号：渝ICP备<br>
            2023002940号-1<br>
            邮箱:mgous#foxmail.com
          </div>
        </el-col>
      </el-row>
    </el-footer>








</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        currentIndex:1,
        user:{username:"",password:""},
          mDogArr:[{url:"mdog/01.jpg",name:"比熊"},{url:"mdog/02.jpg",name:"博美"},{url:"mdog/03.jpg",name:"约克夏"},{url:"mdog/04.jpg",name:"法国斗牛犬"},{url:"mdog/05.jpg",name:"柯基"},
            {url:"mdog/06.jpg",name:"马尔济斯"},{url:"mdog/07.jpg",name:"西高地"},{url:"mdog/08.jpg",name:"雪纳瑞"},{url:"mdog/09.jpg",name:"泰迪"},{url:"mdog/10.jpg",name:"查理王"},
            {url:"mdog/11.jpg",name:"京巴"},{url:"mdog/12.jpg",name:"比熊吉娃娃"}],
          zDogArr:[{url:"zdog/bianmu.jpg",name:"边牧"},{url:"zdog/chaiquan.jpg",name:"柴犬"},{url:"zdog/eba.jpg",name:"恶霸犬"},{url:"zdog/hashiqi.jpg",name:"哈士奇"},
            {url:"zdog/jinmao.jpg",name:"金毛"},{url:"zdog/labuladuo.jpg",name:"拉布拉多"},{url:"zdog/samoye.jpg",name:"萨摩耶"},{url:"zdog/songshi.jpg",name:"松狮"}],
          bDogArr:[{url:"bdog/alasijia.jpg",name:"阿拉斯加"},{url:"bdog/dabaixiong.jpg",name:"大白熊"},{url:"bdog/demu.jpg",name:"德牧"},{url:"bdog/dubin.jpg",name:"杜宾"},
          {url:"bdog/jugui.jpg",name:"巨贵犬"},{url:"bdog/kasiluo.jpg",name:"卡斯罗"},{url:"bdog/luoweina.jpg",name:"罗威纳"},{url:"bdog/qiutian.jpg",name:"秋田犬"}],

        baozhang:[{title:"血统保障",info:"种公、种母信息及证书芯片可查"},
          {title:"健康保障",info:"进口荷兰英特威疫苗，定期驱虫"},
          {title:"快捷安心",info:"本地当日送达，全国包送到家，终身售后"}],
        arr:["imgs/a1.webp", "imgs/a2.webp", "imgs/a3.webp", "imgs/a4.webp", "imgs/a5.jpg"]


      }
    },



   methods:{
     handleSelect1(key,keyPath){
         v.currentIndex=key

     },
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
     }
   }
  })
</script>
</html>